<template>
  <a-modal :open="open" width="1200px" title="查看费用清单" :footer="false" centered @cancel="onCancel">
    <div style="height: 500px">
      <div class="flex justify-between">
        <a-form ref="formRef" :model="formState" class="form-style-flex flex-1">
          <a-form-item label="病案类别" class="w-1/3">
            <a-tree-select
              v-model:value="formState.id"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              placeholder="请选择"
              :field-names="{ label: 'categoryName', value: 'id' }"
              :tree-data="categoryList"
            />
          </a-form-item>
          <a-form-item label="项目类别" class="w-1/3">
            <a-select v-model:value="formState.xmlbbh" max-tag-count="responsive" :options="options" placeholder="请选择" allow-clear />
          </a-form-item>
        </a-form>
        <div>
          <a-space wrap>
            <a-button type="primary" @click="getData">检索</a-button>
            <BaseExport type="病案" name="费用清单" code="000356" :search-params="{ ...formState, inplsh: inplsh }">导出</BaseExport>
          </a-space>
        </div>
      </div>
      <BaseTable :loading="loading" column-code="000356" :data-source="tableData" bordered :height="350" :pagination="pagination">
        <template #bodyCell="{ column, index }">
          <template v-if="column.dataIndex === 'xh'">
            <div>{{ index + 1 }}</div>
          </template>
        </template>
      </BaseTable>
    </div>
  </a-modal>
</template>
<script setup>
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import BaseTable from '@/components/BaseTable'
import { post } from '@/utils/request'

const emit = defineEmits(['update:open', 'success'])
const props = defineProps({
  open: Boolean,
  inplsh: {
    type: String,
    default: ''
  }
})

const formState = ref({})
const categoryList = ref([])
const options = ref([])

// 获取病案类别
const getCateGoryList = async () => {
  const { code, data, msg } = await post('/med/MedicalRecord/getDictMrCategoryList', { inplsh: props.inplsh, id: '-1' })
  if (code !== 0) return message.error(msg)
  categoryList.value = [{ categoryName: '全部', id: '' }, ...data]
  // formState.value.id = data?.[0].id
  formState.value.id = ''
  getData()
}

// 项目类别
const getProjectList = async () => {
  const { code, data } = await post('/drugStorage/comprehenive/getProjectList')
  if (code !== 0) return
  options.value = data.map((item) => {
    return {
      label: item.mc,
      value: item.bh
    }
  })
  options.value = [{ label: '全部', value: '' }, ...options.value]
}

const { loading, tableData, pagination, getData } = useTable({
  url: '/med/MedicalRecord/getStatementOfExpenses',
  params: formState.value,
  formatParams: (params) => {
    return {
      ...params,
      inplsh: props.inplsh
    }
  }
})

const onCancel = () => {
  emit('update:open', false)
}

watch(
  () => props.open,
  (val) => {
    if (val) {
      getCateGoryList()
      getProjectList()
    }
  }
)
</script>

<style lang="less" scoped></style>
